<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <header class="top-navbar">
      <div class="navbar-content">
        <div class="navbar-left">
          <h1 class="system-title">企业办公管理系统</h1>
          <span class="current-module">{{ currentModule }}</span>
        </div>
        <div class="navbar-right">
          <span class="current-user">{{ currentUser }}</span>
          <span class="current-time">{{ currentTime }}</span>
          <button class="logout-btn" @click="handleLogout">退出</button>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 左侧菜单栏 -->
      <aside class="left-sidebar">
        <div class="sidebar-header">
          <h2 class="sidebar-title">{{ currentModule }}</h2>
        </div>
        <nav class="sidebar-menu">
          <ul class="menu-list">
            <li v-for="item in menuItems" :key="item.key" class="menu-item">
              <a href="javascript:void(0)" class="menu-link" :class="{ active: currentPage === item.key }"
                @click="switchPage(item.key, item.label)">
                <span class="menu-icon">{{ item.icon }}</span>
                {{ item.label }}
              </a>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
          <div class="page-title-section">
            <h2 class="page-title">{{ pageTitle }}</h2>
            <div class="breadcrumb" v-if="breadcrumb">
              {{ breadcrumb }}
            </div>
          </div>
          <div class="page-actions">
            <div class="action-buttons">
              <slot name="page-actions"></slot>
            </div>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
          <!-- 左侧主要内容区 -->
          <div class="primary-content">
            <!-- 搜索/筛选栏 -->
            <div v-if="showFilterBar" class="filter-bar">
              <div class="filter-content">
                <slot name="filter-bar"></slot>
              </div>
            </div>

            <!-- 主要内容容器 -->
            <div class="content-container">
              <div class="content-wrapper">
                <slot name="main-content"></slot>
              </div>
            </div>

            <!-- 分页组件 -->
            <div v-if="showPagination" class="pagination-container">
              <div class="pagination-wrapper">
                <slot name="pagination"></slot>
              </div>
            </div>
          </div>

          <!-- 右侧信息面板 -->
          <div v-if="showSidePanel" class="secondary-content">
            <div class="info-panel">
              <div class="panel-header">
                <h3 class="panel-title">{{ sidePanelTitle }}</h3>
              </div>
              <div class="panel-content">
                <slot name="side-panel"></slot>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部操作栏 -->
        <div v-if="showBottomActions" class="bottom-actions">
          <div class="action-buttons">
            <slot name="bottom-actions"></slot>
          </div>
        </div>
      </main>
    </div>

    <!-- 状态栏 -->
    <footer class="status-bar">
      <div class="status-content">
        <span class="status-text">{{ statusText }}</span>
        <span class="status-info">{{ statusInfo }}</span>
        <span class="user-info">用户：{{ currentUser }}</span>
      </div>
    </footer>

    <!-- 全局模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="handleModalOverlayClick">
      <div class="modal-container" @click.stop>
        <slot name="modal"></slot>
      </div>
    </div>

    <!-- 全局消息提示 -->
    <div class="message-container">
      <div v-for="message in messages" :key="message.id" :class="['message-item', `message-${message.type}`]">
        {{ message.text }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineExpose } from "vue";

// Props
const props = defineProps({
  currentModule: {
    type: String,
    default: "系统管理",
  },
  menuItems: {
    type: Array,
    default: () => [],
  },
  pageTitle: {
    type: String,
    default: "首页",
  },
  breadcrumb: {
    type: String,
    default: "",
  },
  showFilterBar: {
    type: Boolean,
    default: false,
  },
  showSidePanel: {
    type: Boolean,
    default: false,
  },
  sidePanelTitle: {
    type: String,
    default: "信息面板",
  },
  showBottomActions: {
    type: Boolean,
    default: false,
  },
  showPagination: {
    type: Boolean,
    default: false,
  },
  showModal: {
    type: Boolean,
    default: false,
  },
});

// Emits
const emit = defineEmits(["page-change", "logout", "modal-close"]);

// Reactive state
const currentUser = ref("Chronos22220399");
const currentTime = ref("");
const currentPage = ref("");
const statusText = ref("就绪");
const statusInfo = ref("");
const messages = ref([]);

// Timer reference
let timeInterval = null;

// Methods
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const switchPage = (pageKey, pageTitle) => {
  currentPage.value = pageKey;
  emit("page-change", { key: pageKey, title: pageTitle });
};

const handleLogout = () => {
  if (confirm("确定要退出系统吗？")) {
    emit("logout");
  }
};

const handleModalOverlayClick = () => {
  emit("modal-close");
};

const showMessage = (text, type = "info", duration = 3000) => {
  const id = Date.now();
  const message = { id, text, type };
  messages.value.push(message);

  setTimeout(() => {
    const index = messages.value.findIndex((m) => m.id === id);
    if (index > -1) {
      messages.value.splice(index, 1);
    }
  }, duration);
};

const updateStatus = (status, info = "") => {
  statusText.value = status;
  statusInfo.value = info;
};

// Lifecycle hooks
onMounted(() => {
  updateTime();
  timeInterval = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});

// Expose methods to parent component
defineExpose({
  showMessage,
  updateStatus,
});
</script>

<style scoped>
/* 样式保持不变，这里省略以节省空间 */
/* 可以直接复用之前的 CSS 样式 */

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-content {
  height: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
}

.current-module {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 14px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
}

.logout-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 主容器 */
.main-container {
  display: flex;
  margin-top: 60px;
  min-height: calc(100vh - 100px);
}

/* 左侧菜单栏 */
.left-sidebar {
  width: 240px;
  background: #2c3e50;
  color: white;
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 40px;
  overflow-y: auto;
  z-index: 999;
}

.sidebar-header {
  padding: 20px;
  background: #34495e;
  border-bottom: 1px solid #3d5267;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.sidebar-menu {
  padding: 20px 0;
}

.menu-list {
  list-style: none;
}

.menu-item {
  margin: 8px 20px;
}

.menu-link {
  display: block;
  padding: 12px 16px;
  color: #bdc3c7;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
}

.menu-link:hover,
.menu-link.active {
  background: #3498db;
  color: white;
  transform: translateX(4px);
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  margin-left: 240px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
}

/* 页面头部 */
.page-header {
  background: white;
  padding: 20px 30px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.breadcrumb {
  font-size: 12px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px 30px;
  display: flex;
  gap: 20px;
}

.primary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.secondary-content {
  width: 360px;
  flex-shrink: 0;
}

/* 筛选栏 */
.filter-bar {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e0e0e0;
}

.filter-content {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

/* 内容容器 */
.content-container {
  flex: 1;
}

.content-wrapper {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e0e0e0;
  min-height: 400px;
  padding: 20px;
}

/* 信息面板 */
.info-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

.panel-header {
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.panel-content {
  padding: 20px;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.pagination-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 底部操作栏 */
.bottom-actions {
  background: white;
  padding: 20px 30px;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
}

/* 状态栏 */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #34495e;
  color: #bdc3c7;
  z-index: 1000;
}

.status-content {
  height: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.status-text {
  color: #27ae60;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

/* 消息提示 */
.message-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message-item {
  padding: 12px 16px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.3s ease;
}

.message-success {
  background: #27ae60;
}

.message-warning {
  background: #f39c12;
}

.message-error {
  background: #e74c3c;
}

.message-info {
  background: #3498db;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .left-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .main-content {
    margin-left: 0;
  }

  .content-area {
    flex-direction: column;
    padding: 15px;
  }

  .secondary-content {
    width: 100%;
  }

  .page-header {
    padding: 15px;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style>
